import { View, Text } from '@tarojs/components'
import './EmptyState.scss'

const EmptyState = ({ 
  type = 'default',
  title = '暂无数据',
  description = '暂时没有相关内容',
  icon = '📭',
  actionText,
  onAction,
  className = ''
}) => {
  const getDefaultContent = () => {
    switch (type) {
      case 'search':
        return {
          icon: '🔍',
          title: '未找到相关内容',
          description: '试试其他关键词或浏览推荐内容'
        }
      case 'network':
        return {
          icon: '📡',
          title: '网络连接失败',
          description: '请检查网络连接后重试'
        }
      case 'products':
        return {
          icon: '🛍️',
          title: '暂无商品',
          description: '该分类下暂时没有商品'
        }
      case 'hospitals':
        return {
          icon: '🏥',
          title: '暂无医院',
          description: '该分类下暂时没有医院'
        }
      case 'doctors':
        return {
          icon: '👨‍⚕️',
          title: '暂无医生',
          description: '该分类下暂时没有医生'
        }
      default:
        return {
          icon,
          title,
          description
        }
    }
  }

  const content = getDefaultContent()

  return (
    <View className={`empty-state ${className}`}>
      <View className='empty-icon'>{content.icon}</View>
      <Text className='empty-title'>{content.title}</Text>
      <Text className='empty-description'>{content.description}</Text>
      {actionText && onAction && (
        <View className='empty-action' onClick={onAction}>
          <Text>{actionText}</Text>
        </View>
      )}
    </View>
  )
}

export default EmptyState
